<template>
  <div class="main">
    <el-container>
      <el-header class="main-header">
        <div class="header">
          <span class="header-bg" ></span>
          <span class="header-title" >34层的风</span>
        </div>
        <div id="nav">
          <a class="tab-button" v-html="curr_time"></a>
          <router-link class="tab-button" to="/">首页</router-link> |
          <router-link class="tab-button" to="/contact">联系</router-link>
          <router-link class="tab-button" to="/fe">占星咨询</router-link>
        </div>
        <div class="days-process-box">
          <div class="box-title">
            <span class="title-year">{{curr_year}}</span>年还有<span class="title-day">{{remain_days}}</span>天
          </div>
          <el-progress
              :percentage="passDays"
              :stroke-width="20"
              :text-inside="true"
              status="success"
              striped
              striped-flow
              :duration="10"
          />
<!--          <div class="year-length">-->
<!--            <span class="pass-days" :style="{width:passWidth}"></span>-->
<!--            <span class="remain-days" :style="{width:remainWidth}"></span>-->
<!--          </div>-->
        </div>
      </el-header>
      <el-container>
        <router-view/>
      </el-container>
      <el-footer class="main-footer">
        <div id="main-footer-div"><a target="_blank" href="http://beian.miit.gov.cn/">粤ICP备2022148136号</a>西小贝之悟        @2011-{{curr_year}}</div>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import {ref, onMounted, onUpdated} from "vue";
import {getMonthDays, isLeap} from "@/assets/js/commonFunctions";

export default {
  name:"Main",
  setup(){
    let curr_time = ref("");// '2021-12-08 12:23:00';
    let curr_year = ref("");
    let remain_days = ref("");
    let passDays = ref(1);
    let passWidth = ref("");
    let remainWidth = ref("");

    const currYear = ()=>{
      curr_year.value =(new Date()).getFullYear();
    }
    const currTime = ()=>{
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      month = month < 10 ? ("0" + month) : month;
      day = day < 10 ? ("0" + day) : day;
      hour = hour < 10 ? ("0" + hour) : hour;
      minute = minute < 10 ? ("0" + minute) : minute;
      second = second < 10 ? ("0" + second) : second;
      // let Timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
      let Timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute;
      //在页面上插入日期
      curr_time.value = Timer;
      setTimeout(function () {
        currTime();
      }, 1000 * 60);
    }

    const daysRemain = ()=>{
      //今年有多少天
      let today = new Date();
      let year = today.getFullYear(); //获取完整的年份(4位,1970)
      let month = today.getMonth()+1;//获取当前月份(0-11,0代表1月)
      let day = today.getDate(); //获取当前日(1-31)
      let sum = 0;
      //累计year这一年【1， month）整月的天数
      for(let i = 1;i< month;i++){
        sum += getMonthDays(year, i);
      }
      //最后累加year年month月当月的天数
      sum += day;

      //已经过了多少天
      return {year_days:isLeap(year) ? 366 :365, passed_days:sum};
    }

    const daysRemainCalc = ()=>{
      let ret = daysRemain();
      let total_width = 1000;
      remain_days.value = ret.year_days - ret.passed_days;
      passDays.value = Math.floor(ret.passed_days / ret.year_days * 10000) / 100;
      passWidth.value = (ret.passed_days / ret.year_days )*100 + "%";
      remainWidth.value = ((remain_days.value) / ret.year_days)*100 +"%";
    }

    const setHeaderBgStyle = ()=>{
      let headerBgClass = document.getElementsByClassName("header-bg");
      for(let i=0;i<headerBgClass.length;i++){
        let pLeft = passDays.value;
        if(pLeft > 90){
          pLeft = 90;
        }
        let asideStyle = "position:absolute;left:"+pLeft+"%;";
        headerBgClass[i].setAttribute('style', asideStyle);
      }
    }


    onMounted(()=>{
      currTime();
      daysRemainCalc();
      currYear();
      setHeaderBgStyle();
    })
    onUpdated(()=>{
      daysRemainCalc();
    })

    return {
      curr_time,
      curr_year,
      currTime,
      remain_days,
      daysRemainCalc,
      passDays,
      passWidth,
      remainWidth
    }
  }

}

</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  //padding: 30px;
  display: flex;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
.main{
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  .header {
    text-align: left;
    width:100%;
    height:100px;
    background-color:#00ee00;
    background-image:url('./assets/images/header.jpg');
    background-size:cover;
    .header-bg {
      background-image: url('./assets/images/gogogo.gif');
      width: 133px;
      height: 63px;
      display: inline-block;
      margin-top:20px;
    }
    .header-title{
      color: rgb(255, 255, 255);
      font-size: xx-large;
      font-family: cursive;
      //float: right;
      //margin-top: 40px;
      //margin-right: 20px;
      position: absolute;
      left: 10px;
    }
  }

}

.tab-button{
  flex: 1;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;
}
.main-header{
  height: auto;
  line-height:unset;
  padding: 0;
}
.main-footer{
  height: auto;
  line-height:unset;
  padding: 0;
}
.el-aside {
  background-color: #d3dce6;
  color: var(--el-text-color-primary);
  text-align: center;
}

.el-main {
  background-color: #e9eef3;
  color: var(--el-text-color-primary);
  text-align: center;
  //line-height: 160px;
  min-height: 710px;
}

body > .el-container {
  margin-bottom: 40px;
}

//.el-container:nth-child(5) .el-aside,
//.el-container:nth-child(6) .el-aside {
//  line-height: 260px;
//}
//
//.el-container:nth-child(7) .el-aside {
//  line-height: 320px;
//}
#main-footer-div{
  width:100%;
  height:30px;
  border:1px solid #669933;
  background-image:url('./assets/images/footer.jpg');
  background-size:cover;
  float:left;
  text-align:right;
}
.days-process-box{
  width: 100%;
  border: 1px solid #00ff00;
  .box-title{
    text-align: left;
    padding-left: 2px;
    font-size: 13px;
    .title-year{
      font-weight: bold;
      font-size:15px;
    }
    .title-day{
      font-weight: bold;
      font-size:15px;
      color: red;
    }
  }
  .year-length{
    border: 1px solid #00ff00;
    border-radius:15px;
    height:15px;
    width:100%;
    .pass-days{
      display:inline-block;
      border-radius: 15px 0 0 15px;
      height:15px;
      background-color:#00ff00;
      background-image:url('./assets/images/pass.gif');
    }
    .remain-days{
      display:inline-block;
      border-radius: 0 15px 15px 0;
      height:15px;
      background-color:#f0f2f5;
    }
  }
}

</style>
